<template>
  <view class="container">
    <view style="margin-top: 120rpx;"></view>
    <!-- 使用通用导航栏组件 -->
    <nav-bar :title="'新增收支记录'" />

    <uni-forms ref="form" :model="formData" :rules="rules">
      <uni-forms-item label="店铺ID" name="store_id">
        <uni-easyinput v-model="storeId" disabled />
      </uni-forms-item>

      <uni-forms-item label="员工" name="staff_id" required>
        <view class="staff-container">
          <view v-for="staff in staffList" :key="staff.user_id" class="staff-item"
            :class="{ selected: formData.staff_id === staff.user_id }" @click="selectStaff(staff)">
            <text class="staff-name">{{ staff.name }}</text>
            <uni-icons :type="formData.staff_id === staff.user_id ? 'checkbox-filled' : 'checkbox'"
              :color="formData.staff_id === staff.user_id ? '#4cd964' : '#999'" size="20" />
          </view>
        </view>
      </uni-forms-item>

      <uni-forms-item label="收支类型" name="income_type" required>
        <uni-data-checkbox v-model="formData.income_type" :localdata="[
          { text: '支出', value: 0 },
          { text: '收入', value: 1 }
        ]" />
      </uni-forms-item>

      <uni-forms-item label="交易类型" name="transaction_type" required>
        <uni-data-checkbox v-model="formData.transaction_type" :localdata="transactionTypes" />
      </uni-forms-item>

      <uni-forms-item label="金额" name="amount_used" required>
        <uni-easyinput v-model="formData.amount_used" type="number" placeholder="请输入金额" />
      </uni-forms-item>

      <uni-forms-item label="备注" name="description">
        <uni-easyinput v-model="formData.description" type="textarea" placeholder="请输入备注" />
      </uni-forms-item>

      <button type="primary" @click="submitForm">提交</button>
    </uni-forms>
  </view>
</template>

<script>
import cardConsumptions from '@/utils/card_consumptions.js';
import store from '@/utils/store.js';

export default {
  data() {
    return {
      staffList: [],
      storeId: '',
      transactionTypes: [
        { value: 1, text: '卡包充值' },
        { value: 2, text: '成本支出' },
        { value: 3, text: '现金单次消费' },
        { value: 4, text: '卡包消费' },
        { value: 5, text: '卡包提成' },
        { value: 6, text: '单笔业务提成' }
      ],
      formData: {
        staff_id: null,
        store_id: null,
        income_type: 0,
        transaction_type: null,
        amount_used: null,
        description: ''
      },
      rules: {
        staff_id: {
          rules: [{ required: true, errorMessage: '请选择销售员' }]
        },
        income_type: {
          rules: [{ required: true, errorMessage: '请选择收支类型' }]
        },
        transaction_type: {
          rules: [{ required: true, errorMessage: '请选择交易类型' }]
        },
        amount_used: {
          rules: [{ required: true, errorMessage: '请输入金额' }]
        }
      }
    }
  },
  onLoad(options) {
    this.storeId = options.store_id || '';
    this.formData.store_id = options.store_id || '';
    this.loadStaffList(options.store_id);
  },
  methods: {
    selectStaff(staff) {
      this.formData.staff_id = staff.user_id;
    },
    async loadStaffList(storeId) {
      const staffResponse = await store.getStoreUsers(storeId, {
        'roles[]': ['staff', 'owner', 'manager']
      });
      this.staffList = staffResponse.list || [];
    },
    async submitForm() {
      console.log("表单数据:", this.formData);
      this.formData.store_id = this.storeId;
      this.formData.amount_used = Number(this.formData.amount_used);
      await this.$refs.form.validate()

      try {
        const result = await cardConsumptions.addConsumption(this.formData);
        console.log("提交结果:", result);
        uni.showToast({
          title: '新增收支记录成功',
          icon: 'success'
        });
        uni.navigateBack();
      } catch (error) {
        console.error("提交失败:", error);
        uni.showToast({
          title: '新增收支记录失败: ' + (error.message || '未知错误'),
          icon: 'none'
        });
      }


    }
  }
}
</script>

<style>
.container {
  padding: 0 30rpx;
  background-color: #f5f5f5;
}

uni-forms {
  margin: 0 -30rpx;
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.staff-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15rpx;
  padding: 10rpx;
}

.staff-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  background-color: #fff;
}

.staff-item.selected {
  background-color: #4cd964;
  border-color: #4cd964;
  color: white;
}

.staff-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.required-mark {
  color: red;
  margin-right: 5px;
}
</style>